<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>区间条形图</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2.js"></script>
<script>
  const data = [
    { gender: 'Male', value: -2.2, cate: '0-4' },
    { gender: 'Male', value: -2.2, cate: '5-9' },
    { gender: 'Male', value: -2.3, cate: '10-14' },
    { gender: 'Male', value: -2.5, cate: '15-19' },
    { gender: 'Male', value: -2.7, cate: '20-24' },
    { gender: 'Male', value: -3.1, cate: '25-29' },
    { gender: 'Male', value: -3.2, cate: '30-34' },
    { gender: 'Male', value: -3.0, cate: '35-39' },
    { gender: 'Male', value: -3.2, cate: '40-44' },
    { gender: 'Male', value: -4.3, cate: '45-49' },
    { gender: 'Male', value: -4.4, cate: '50-54' },
    { gender: 'Male', value: -3.6, cate: '55-59' },
    { gender: 'Male', value: -3.1, cate: '60-64' },
    { gender: 'Male', value: -2.4, cate: '65-69' },
    { gender: 'Male', value: -2.5, cate: '70-74' },
    { gender: 'Male', value: -2.3, cate: '75-79' },
    { gender: 'Male', value: -1.2, cate: '80-84' },
    { gender: 'Male', value: -0.6, cate: '85-89' },
    { gender: 'Male', value: -0.2, cate: '90-94' },
    { gender: 'Male', value: -0.1, cate: '95-99' },
    { gender: 'Male', value: -0.1, cate: '100 +' },
    { gender: 'Female', value: 2.1, cate: '0-4' },
    { gender: 'Female', value: 2.0, cate: '5-9' },
    { gender: 'Female', value: 2.2, cate: '10-14' },
    { gender: 'Female', value: 2.4, cate: '15-19' },
    { gender: 'Female', value: 2.6, cate: '20-24' },
    { gender: 'Female', value: 3.0 , cate: '25-29'},
    { gender: 'Female', value: 3.1, cate: '30-34' },
    { gender: 'Female', value: 2.9, cate: '35-39' },
    { gender: 'Female', value: 3.1, cate: '40-44' },
    { gender: 'Female', value: 4.1, cate: '45-49' },
    { gender: 'Female', value: 4.3, cate: '50-54' },
    { gender: 'Female', value: 3.6, cate: '55-59' },
    { gender: 'Female', value: 3.4, cate: '60-64' },
    { gender: 'Female', value: 2.6, cate: '65-69' },
    { gender: 'Female', value: 2.9, cate: '70-74' },
    { gender: 'Female', value: 2.9, cate: '75-79' },
    { gender: 'Female', value: 1.8, cate: '80-84' },
    { gender: 'Female', value: 1.2, cate: '85-89' },
    { gender: 'Female', value: 0.6, cate: '90-94' },
    { gender: 'Female', value: 0.1, cate: '95-99' },
    { gender: 'Female', value: 0.1, cate: '100 +' }
  ];
  const chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth * 0.8,
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data, {
    range: {
      value: 5
    }
  });
  chart.coord({
    transposed: true
  });
  chart.axis('cate', {
    line: F2.Global._defaultAxis.line,
    grid: null
  });
  chart.axis('value', {
    line: null,
    grid: F2.Global._defaultAxis.grid,
    label(text, index, total) {
      const textCfg = {};
      if (index === 0) {
        textCfg.textAlign = 'left';
      }
      if (index === total - 1) {
        textCfg.textAlign = 'right';
      }
      return textCfg;
    }
  });
  chart.interval().position('cate*value').color('gender').adjust('stack');
  chart.render();
</script>
</body>
</html>
